import { ref, nextTick, watch, computed } from 'vue';
import selectTreeHelper from '..';
// import { options, searchResult } from '../mock';
import { useQuasar } from '@teld/q-components';
import NoDataImage from 'src/assets/no-data.png';
export const useRenderContent = (mappingProps, emit, isShow, refField) => {
  const {
    result_m,
    selectTreeHelperContent,
    checkList,
    dataBackUp,
    selectList,
    result_m_search,
    breadcrumbNavigation,
    content,
  } = mappingProps;
  const $q = useQuasar();
  result_m_search.value = [];
  // dataBackUp.value=[]

  breadcrumbNavigation.value = [];
  const resetContent = () => {
    return (
      <t-inner-loading
        showing={true}
        label='加载中...'
        label-class='text-teal'
        label-style='font-size: 1.1em'
      />
    );
  };
  content.value = resetContent();
  watch(
    () => mappingProps.filter.value,
    () => {},
    {
      immediate: true,
    },
  );
  const getCaption = (caption, value) => {
    if (value) {
      return Funcs.GetTerms(value.ReferenceExpr, caption);
    } else {
      return caption;
    }
  };
  const fieldMapping = computed(() => {
    if (mappingProps.columns) {
      if ($q.screen.xs || $q.platform.is.mobile) {
        return [
          {
            field: mappingProps.labelField,
            label: '',
            textAlign: 'left',
            name: mappingProps.labelField,
            required: '',
            label: '',
            align: '',
            width: '',
          },
        ];
      }
      let columns = mappingProps.columns.filter(item => item.isShow);
      return columns.map(item => {
        return {
          field: item.dataField,
          label: getCaption(item.caption, item.ValueInfo_caption),
          textAlign: item.textAlign ? item.textAlign : 'left',
          width: item.width,
        };
      });
    } else {
      return [
        {
          field: 'Name',
          label: '名称',
          textAlign: 'left',
          name: 'Name',
          required: true,
          label: '名称',
          align: 'left',
          width: '100%',
        },
      ];
    }
  });
  //级联
  const formatRelationData = data => {
    if (!mappingProps.customResults_result || !data.relationNode) {
      return;
    }
    if (typeof mappingProps.customResults_result == 'string') {
      mappingProps.customResults_result = JSON.parse(
        mappingProps.customResults_result,
      );
    }
    let relationNode = JSON.parse(data.relationNode);
    if (
      mappingProps.customResults_result.dataSource.find(
        item =>
          item.filterLabelOptions &&
          item.filterLabelOptions.indexOf(`_last`) != 0,
      )
    ) {
      mappingProps.customResults_result.dataSource.forEach((item, index) => {
        if (
          item.filterLabelOptions &&
          item.filterLabelOptions.indexOf(`_last`) != 0
        ) {
          let filterLabelOptions =
            item.filterLabelOptions &&
            item.filterLabelOptions.replace(`_last`, `${relationNode.length}`);
          item.filterLabelOptions = filterLabelOptions;
        }
      });
    }
    mappingProps.customResults_result.dataSource.map(item => {
      let Value = null;
      let clearValue = new Function(
        'element',
        `with(element){
          debugger
      return element.${item.Value}=''
   }`,
      );
      clearValue({ LocalVars: mappingProps.localvars });
    });
    relationNode.forEach((element, index) => {
      if (mappingProps.customResults_result.type == 'default') {
        //last 设定异常，可能存在两个相同数据
        let customResults_result =
          mappingProps.customResults_result.dataSource.filter(
            item =>
              item.filterLabelOptions &&
              item.filterLabelOptions.indexOf(`layer${index + 1}`) == 0,
          );
        customResults_result.map(item => {
          let Value = null;

          //Name
          if (
            item.filterLabelOptions &&
            item.filterLabelOptions.indexOf('displayName') > 0
          ) {
            Value = element[mappingProps.labelField];
            let setValue = new Function(
              'element',
              `with(element){
                debugger
            return element.${item.Value}='${Value}'
         }`,
            );
            setValue({ LocalVars: mappingProps.localvars });
          } else {
            Value = element[mappingProps.valueField];
            let setValue = new Function(
              'element',
              `with(element){
              debugger
          return element.${item.Value}='${Value}'
       }`,
            );
            setValue({ LocalVars: mappingProps.localvars });
          }
        });
      } else {
        //计算解析
        mappingProps.customResults_result.dataSource.forEach(item => {
          let setValue = new Function(
            'element',
            `with(element){
                  debugger
                  if(${item.filter}){
                    window.${item.Value}=element.${item.filterLabel}
                  }
              }`,
          );
          setValue(element);
        });
      }
    });
    // mappingProps.customResults_result
    // level
  };
  //单选
  const formatSingle = data => {
    if (!data) return;

    // 更新原始 record 对象中的对应字段
    if (mappingProps.record && typeof mappingProps.record === 'object') {
      // 更新 valueMapping 对应的字段
      if (mappingProps.valueMapping && mappingProps.valueMapping.valueField) {
        const valueField = mappingProps.valueMapping.valueField;
        mappingProps.record[valueField] = data[mappingProps.valueField];
      }

      // 更新 labelMapping 对应的字段
      if (mappingProps.valueMapping && mappingProps.valueMapping.labelField) {
        const labelField = mappingProps.valueMapping.labelField;
        mappingProps.record[labelField] = data[mappingProps.labelField];
      }

      // 如果没有配置 valueMapping，使用默认的 valueField 和 labelField
      if (!mappingProps.valueMapping) {
        if (mappingProps.valueField) {
          mappingProps.record[mappingProps.valueField] = data[mappingProps.valueField];
        }
        if (mappingProps.labelField) {
          mappingProps.record[mappingProps.labelField] = data[mappingProps.labelField];
        }
      }
    }

    return {
      label: data[mappingProps.labelField],
      value: data[mappingProps.valueField],
    };
  };
  //多选
  const formatMutData = data => {
    if (data) {
      data?.forEach(item => {
        let Obj = {};
        if (mappingProps.displayDataSource) {
          Obj[mappingProps.displayDataSource] = item[mappingProps.valueField];
          // delete item[mappingProps.valueField]
        }
        if (mappingProps.displayMapping) {
          Obj[mappingProps.displayMapping] = item[mappingProps.labelField];
          // delete item[mappingProps.labelField]
        }
        delete item.id;
        item = Object.assign(item, Obj);
      });

      // 更新原始 record 对象中的对应字段（多选情况）
      if (mappingProps.record && typeof mappingProps.record === 'object') {
        // 使用 valueMapping 配置的字段
        if (mappingProps.valueMapping && mappingProps.valueMapping.valueField) {
          const valueField = mappingProps.valueMapping.valueField;
          mappingProps.record[valueField] = data.map(item => item[mappingProps.valueField]);
        }

        if (mappingProps.valueMapping && mappingProps.valueMapping.labelField) {
          const labelField = mappingProps.valueMapping.labelField;
          mappingProps.record[labelField] = data.map(item => item[mappingProps.labelField]);
        }

        // 如果没有配置 valueMapping，使用默认的 valueField 和 labelField
        if (!mappingProps.valueMapping) {
          if (mappingProps.valueField) {
            mappingProps.record[mappingProps.valueField] = data.map(item => item[mappingProps.valueField]);
          }
          if (mappingProps.labelField) {
            mappingProps.record[mappingProps.labelField] = data.map(item => item[mappingProps.labelField]);
          }
        }
      }

      emit('update:value', data);
    }
  };
  const formatData = data => {
    /**
     *
     * 多选
     * 单选
     *    级联
     *    非级联
     */
    if (mappingProps.multiple) {
      formatMutData(data);
    } else {
      if (mappingProps.responseRelationNode != 2) {
        let res = formatSingle(data);
        if (res) {
          emit('update:value', res.value);
          emit('update:text', res.label);
        }
      } else {
        formatRelationData(data);
      }
    }
  };
  const getSteps = targetCode => {
    let step = '';
    //固定步长
    if (mappingProps.isClassiFicationSteps) {
      for (let i = 0; i < mappingProps.classiFicationStep; i++) {
        step = step + '_';
      }
    } else {
      //非固定步长 动态计算
      let classiFicationStepRule =
        mappingProps.classiFicationStepRule.split('-');
      let currectIndex = 0;
      classiFicationStepRule.reduce((prev, cur, index, arr) => {
        if (prev == targetCode?.toString().length) {
          currectIndex = index;
        }
        return prev * 1 + cur * 1;
      });
      let steps = classiFicationStepRule[currectIndex];
      for (let i = 0; i < steps; i++) {
        step = step + '_';
      }
    }
    return step;
  };
  const queryFilter = searchParameters => {
    if (!mappingProps.isLazy) {
      return '';
    }

    if (mappingProps.filter.value) {
      let fasDynamicFilter = {};
      fasDynamicFilter[mappingProps.labelField] = mappingProps.filter.value;
      return {
        advancedFilter: {
          ElementType: 'Group',
          Filters: [],
        },
        fasDynamicFilter: {},
      };
    }

    let currectFields = null;
    let target =
      mappingProps.type == 2
        ? mappingProps.value_pid
        : mappingProps.classiFicationCode;
    if (target) {
      currectFields = mappingProps.columns.find(
        item => item.dataField == target,
      );
    }
    if (!currectFields) currectFields = {};
    if (mappingProps.type == 2) {
      let fasDynamicFilter = {};
      fasDynamicFilter[mappingProps.value_pid] =
        searchParameters[mappingProps.value_pid];
      return {
        advancedFilter: {
          ElementType: 'Group',
          Filters: [
            {
              ElementType: 'Filter',
              Code: `${currectFields.tableAlias}.${currectFields.originalName}`,
              Condition: '=',
              Value: `${searchParameters[mappingProps.value_pid]}`,
              Name: '',
              DataType: '',
              ValueName: '',
              ValueType: 0,
            },
          ],
        },
        fasDynamicFilter: fasDynamicFilter,
      };
    }
    let step = getSteps(currectFields[mappingProps.classiFicationCode]);
    if (!currectFields) return;
    let fasDynamicFilter = {};
    fasDynamicFilter[mappingProps.value_pid] = searchParameters[
      mappingProps.value_pid
    ]
      ? searchParameters[mappingProps.value_pid] + step
      : step;
    return {
      advancedFilter: {
        ElementType: 'Group',
        Filters: [
          {
            ElementType: 'Filter',
            Code: `${currectFields.tableAlias}.${currectFields.originalName}`,
            Condition: 'fixedlengthcontains',
            Value: `${
              searchParameters[mappingProps.value_pid]
                ? searchParameters[mappingProps.value_pid] + step
                : step
            }`,
            Name: '',
            DataType: '',
            ValueName: '',
            ValueType: 0,
          },
        ],
      },
      fasDynamicFilter: fasDynamicFilter,
    };
  };
  const onSearch = (Parameters, searchParameters) => {
    debugger;
    if (!Parameters) {
      Parameters = {
        filter: '',
      };
    }
    //debugger;
    searchParameters.FilterValue = mappingProps.filter.value;
    searchParameters.PageIndex = Parameters.pageIndex + 1;
    searchParameters.PageSize = Parameters.cntPerPage;
    searchParameters[mappingProps.value_pid] = Parameters.hasOwnProperty('pid')
      ? Parameters.pid
      : mappingProps.parentId;
    if (Parameters.filter) {
      searchParameters[mappingProps.value_pid] = '';
      searchParameters.cb = Parameters.cb;
    }
  };
  const renderPCContent = () => {
    return (
      <t-popup-proxy
        ref={mappingProps.refTPopupProxy}
        class='select_helper_p_popup select_helper_p_popup_tree_loadjs'
        style='max-height:99vh !important'
        onShow={async () => {
          await nextTick();
          let _options = { ...mappingProps.mappingProps };
          mappingProps.isOpen.value = true;

          // 检查是否有外部传递的 options
          const hasExternalOptions = mappingProps.externalOptions && mappingProps.externalOptions.length > 0;

          selectTreeHelperContent.value = new window.TeldTreeListHelper(
            mappingProps.selectTreeHelperInputContent.value,
            {
              ..._options,
              fieldMapping: fieldMapping.value,
              dropDownElement: mappingProps.selectTreeHelperContent.value,
              refField: refField.value.$el,
              refTPopupProxy: mappingProps.refTPopupProxy,
              // 如果有外部 options，使用外部数据，否则使用原有的 loadNode
              loadNode: hasExternalOptions ?
                async pid => {
                  // 从外部 options 中查找子节点
                  const findChildren = (parentId) => {
                    const findInTree = (nodes) => {
                      for (let node of nodes) {
                        if (node.value === parentId) {
                          return node.children || [];
                        }
                        if (node.children && node.children.length > 0) {
                          const found = findInTree(node.children);
                          if (found.length > 0) return found;
                        }
                      }
                      return [];
                    };
                    return findInTree(mappingProps.externalOptions);
                  };
                  return findChildren(pid);
                } :
                async pid => {
                  let searchParameters = {};
                  onSearch({ pid: pid }, searchParameters);
                  let advFilter = queryFilter(searchParameters);
                  let fasDynamicFilter, advancedFilter;
                  if (advFilter) {
                    fasDynamicFilter = advFilter.fasDynamicFilter;
                    advancedFilter = advFilter.advancedFilter;
                  }
                  let result = await mappingProps.search(
                    null,
                    null,
                    mappingProps.filter.value,
                    advancedFilter,
                    fasDynamicFilter,
                  );
                  return result?.List;
                },
              isLazy: hasExternalOptions ? false : mappingProps.isLazy, // 外部 options 时不需要懒加载
              confirm: e => {
                //数据处理
                formatData(e);
                mappingProps._confirm(e);
              },
              teldTree_search_inner: mappingProps.select_tree_helper_input,
              close: () => {
                mappingProps.close();
              },
              search: hasExternalOptions ?
                async filter => {
                  // 从外部 options 中搜索
                  const searchInTree = (nodes, keyword) => {
                    const results = [];
                    const traverse = (nodeList) => {
                      for (let node of nodeList) {
                        if (node.label && node.label.toLowerCase().includes(keyword.toLowerCase())) {
                          results.push(node);
                        }
                        if (node.children && node.children.length > 0) {
                          traverse(node.children);
                        }
                      }
                    };
                    traverse(nodes);
                    return results;
                  };
                  return searchInTree(mappingProps.externalOptions, mappingProps.filter.value);
                } :
                async filter => {
                  let fasDynamicFilter = {};
                  fasDynamicFilter[mappingProps.labelField] =
                    mappingProps.filter.value;
                  let result = await mappingProps.search(
                    null,
                    null,
                    mappingProps.filter.value,
                    null,
                    fasDynamicFilter,
                  );
                  return result?.List;
                },
              getDropDownWidth: () => {
                mappingProps.sizeIsChange.value = new Date().getTime();
                return mappingProps.FieldWidth.value.split(';')[0];
              },
            },
          );

          selectTreeHelperContent.value.CreatedInputElementOutSide();
          mappingProps.select_tree_helper_input.value.focus();

          if (mappingProps.multiple) {
            let setValue = [];
            if (mappingProps.mappingProps.value) {
              setValue = mappingProps.mappingProps.value.map(item => {
                let obj = {};
                (obj[mappingProps.labelField] =
                  item[mappingProps.displayMapping]),
                  (obj[mappingProps.valueField] =
                    item[mappingProps.displayDataSource]);
                return {
                  ...obj,
                  label: item[mappingProps.displayMapping],
                  value: item[mappingProps.displayDataSource],
                  ...item,
                };
              });
            }
            selectTreeHelperContent.value.setValue(setValue);
          } else {
            selectTreeHelperContent.value.setValue([
              {
                label: mappingProps.displayingResults.value,
                value: mappingProps.mappingProps.value,
              },
            ]);
          }
        }}
        onHide={() => {
          content.value = resetContent();
          mappingProps.isOpen.value = false;
          mappingProps.filter.value = '';
        }}
      >
        <div
          style={`width:${mappingProps.dropDownWidth !== 'auto' ? 'auto;' : mappingProps.FieldWidth.value};min-height:200px;    display: flex;flex-direction: column;`}
        >
          <div
            class='selectTreeHelperInputContent'
            ref={mappingProps.selectTreeHelperInputContent}
          ></div>
          <div
            class={'selectTreeHelperContent'}
            ref={mappingProps.selectTreeHelperContent}
          ></div>
          {content.value}
        </div>
      </t-popup-proxy>
    );
  };
  //递归处理
  const recursionFormat = (targetArray, targetID, proxyArray) => {
    let target = targetArray.filter(
      item => item[mappingProps.value_pid] == targetID,
    );
    targetArray = targetArray.filter(
      item => item[mappingProps.value_pid] != targetID,
    );
    proxyArray = target;
    if (proxyArray.forEach) {
      proxyArray.forEach(item => {
        item.children = [];
        item.children = recursionFormat(
          targetArray,
          item[mappingProps.lable_pid],
          item.children,
        );
        if (!(item.children && item.children.length)) {
          delete item.children;
        }
      });
    }
    return proxyArray;
  };
  //分级码
  const formatDataByParentNode = res => {
    let parentId = mappingProps.parentId;
    let proxyArray = [];
    return recursionFormat(res, parentId, proxyArray);
  };
  const recursionFormat_step = (res, ficationStep, proxyArray, code) => {
    let targetFicationStep = null;
    if (!code) code = '';
    if (ficationStep.indexOf('-') != -1) {
      ficationStep = ficationStep.split('-');
      targetFicationStep = ficationStep.shift();
      ficationStep = ficationStep.join('-');
    }
    proxyArray = res.filter(
      el =>
        el[mappingProps.classiFicationCode].toString().length ==
          targetFicationStep * 1 + code.toString().length * 1 &&
        el[mappingProps.classiFicationCode].indexOf(code) == 0,
    );
    res = res.filter(
      el =>
        !(
          el[mappingProps.classiFicationCode].toString().length ==
            targetFicationStep * 1 + code.toString().length * 1 &&
          el[mappingProps.classiFicationCode].indexOf(code) == 0
        ),
    );
    proxyArray.forEach(el => {
      let children = recursionFormat_step(
        res,
        ficationStep,
        [],
        el[mappingProps.classiFicationCode],
      );
      if (children && children.length > 0) {
        el.children = children;
      }
    });
    return proxyArray;
  };
  //步骤式
  const formatDataByNextStep = res => {
    let ficationStep = mappingProps.isClassiFicationSteps
      ? mappingProps.classiFicationStep
      : mappingProps.classiFicationStepRule;
    let proxyArray = [];
    return recursionFormat_step(res, ficationStep, proxyArray);
  };
  watch(
    () => mappingProps.value,
    (newVal, oldVal) => {
      checkList.value = JSON.parse(JSON.stringify(newVal));
    },
  );
  watch(
    () => checkList.value,
    () => {
      selectList.value = checkList.value.map(
        item => item[mappingProps.valueField],
      );
    },
    {
      deep: true,
    },
  );
  const loadMobileData = params => {
    let searchParameters = {};
    // let params = {}
    // if(typeof pid != 'undefined'){
    //   params['pid']=param.pid
    // }
    onSearch(params, searchParameters);
    let advFilter = queryFilter(searchParameters);
    let fasDynamicFilter, advancedFilter;
    if (advFilter) {
      fasDynamicFilter = advFilter.fasDynamicFilter;
      advancedFilter = advFilter.advancedFilter;
    }
    return new Promise(resolve => {
      mappingProps
        .search(
          null,
          null,
          mappingProps.filter.value,
          advancedFilter,
          fasDynamicFilter,
        )
        .then(res => {
          // //非懒加载模式，自己格式化数据
          if (!mappingProps.isLazy) {
            if (mappingProps.type == 2) {
              result_m.value = formatDataByParentNode(res?.List);
              dataBackUp.value = result_m.value;
            } else {
              result_m.value = formatDataByNextStep(res?.List);
              dataBackUp.value = result_m.value;
            }
            return;
          }
          resolve(res?.List);
        });
    });
  };
  const generateToolbar = () => {
    return (
      <div>
        <header>
          <i
            class={`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowLeft ?? 'icon-t-arrow-left'}`}
            onClick={e => {
              e.stopPropagation();
              e.preventDefault();
              mappingProps.close();
              return false;
            }}
          ></i>
          <span>{mappingProps.label}</span>
        </header>
      </div>
    );
  };
  const generateInput = () => {
    return (
      <t-card class='q_card'>
        <t-card-section
          class='row items-center t-pb-none tr-card-header'
          style='display:flex;padding-top:0;padding: 12px 16px 0 16px; width: 100%;justify-content: space-between;'
        >
          <div class={'compact t-popup-search'} style={'width:100%'}>
            <div class='popup-search_container'>
              <t-input
                class='popup-search_searchbar tr-input-search'
                placeholder={mappingProps.placeholder}
                borderType='borderless'
                v-model={mappingProps.filter.value}
                clearable
                style='height:40px'
              >
                {{
                  prepend: () => {
                    return (
                      <t-icon
                        name='search'
                        class='cursor-pointer'
                        style='font-size:14px;margin:0 8px'
                      />
                    );
                  },
                }}
              </t-input>
            </div>
          </div>
        </t-card-section>
      </t-card>
    );
  };
  const generateTable = () => {
    return (
      <t-card class='q_card_auto q_card'>
        <t-card-section
          class='row items-center t-pb-none tr-card-header'
          style='display:flex;padding:8px 0px; width: 100%;padding-top:0;justify-content: space-between;'
        >
          {/* v-model:modelValue={filter.value} */}
          <div class={'select_tree_m_content'}>
            <t-table
              rows={result_m.value}
              columns={fieldMapping.value}
              class='select_helper_popup_single_row_table select_helper_popup_single_row_table_m'
              row-key='Name'
              selection='single'
              hide-header
              hide-bottom
              rows-per-page-options={[0]}
              testaaa={result_m.value}
            >
              {{
                body: props => {
                  // console.log(props)
                  return (
                    <t-tr
                      props={props}
                      onClick={() => {}}
                      style={
                        checkList.value.some(
                          el =>
                            el[mappingProps.valueField] ==
                            props.row[mappingProps.valueField],
                        )
                          ? 'background:#F0F2F5;color:var(--t-color);display: flex;align-items: center;'
                          : 'display: flex;align-items: center;'
                      }
                    >
                      {(() => {
                        let Template = [];
                        if (mappingProps.multiple) {
                          Template.push(
                            <t-td
                              style='padding-left:16px;display: flex;align-items: center;width:44px'
                              auto-width
                            >
                              <t-checkbox
                                size='sm'
                                onClick={() => {
                                  if (
                                    mappingProps.onlyCheckedNotLeaf &&
                                    (props.row.children ||
                                      props.row[mappingProps.isLeaf])
                                  )
                                    return;
                                  if (mappingProps.multiple) {
                                    if (
                                      checkList.value.some(
                                        el =>
                                          el[mappingProps.valueField] ==
                                          props.row[mappingProps.valueField],
                                      )
                                    ) {
                                      checkList.value = checkList.value.filter(
                                        el =>
                                          el[mappingProps.valueField] !=
                                          props.row[mappingProps.valueField],
                                      );
                                    } else {
                                      checkList.value.push(props.row);
                                    }

                                    return;
                                  }
                                }}
                                {...(mappingProps.onlyCheckedNotLeaf &&
                                (props.row.children ||
                                  props.row[mappingProps.isLeaf])
                                  ? { disable: true }
                                  : {})}
                                v-model={selectList.value}
                                val={props.row[mappingProps.valueField]}
                              />
                            </t-td>,
                          );
                        }
                        for (let i in props.row) {
                          Template.push(
                            <t-td
                              key={i}
                              props={props}
                              style={
                                mappingProps.multiple
                                  ? 'padding:0 8px;padding-right:16px;width: 100%; display: flex;'
                                  : 'padding:0 8px;padding-left:16px;padding-right:16px;width: 100%; display: flex;min-height:44px;height:auto'
                              }
                            >
                              {/* 自定义内容区域 */}
                              <div class={'table_content'}>
                                <div
                                  class={'table_content_img'}
                                  onClick={() => {
                                    if (
                                      mappingProps.onlyCheckedNotLeaf &&
                                      (props.row.children ||
                                        (mappingProps.isLeaf !== null &&
                                          props.row[mappingProps.isLeaf] !=
                                            leafValue.value))
                                    )
                                      return;
                                    if (mappingProps.multiple) {
                                      if (
                                        checkList.value.some(
                                          el =>
                                            el[mappingProps.valueField] ==
                                            props.row[mappingProps.valueField],
                                        )
                                      ) {
                                        checkList.value =
                                          checkList.value.filter(
                                            el =>
                                              el[mappingProps.valueField] !=
                                              props.row[
                                                mappingProps.valueField
                                              ],
                                          );
                                      } else {
                                        checkList.value.push(props.row);
                                      }
                                      return;
                                    }
                                    //级联
                                    if (
                                      mappingProps.responseRelationNode == 2
                                    ) {
                                      let target = _.cloneDeep(
                                        breadcrumbNavigation.value.slice(0),
                                      );
                                      target.push(_.cloneDeep(props.row));
                                      target.forEach((item, index) => {
                                        item.level = index + 1;
                                        delete item.children;
                                      });
                                      let res = Object.assign({}, props.row);
                                      res.relationNode = JSON.stringify(target);
                                      formatData(res);
                                      //数据处理
                                      mappingProps._confirm(res);
                                      return;
                                    }
                                    formatData(props.row);
                                    //数据处理
                                    mappingProps._confirm(props.row);
                                  }}
                                >
                                  <span>
                                    {mappingProps.iconEnable
                                      ? (() => {
                                          return (
                                            <img
                                              src={
                                                props.row[
                                                  mappingProps.iconDataSource
                                                ]
                                              }
                                            />
                                          );
                                        })()
                                      : ''}
                                  </span>
                                  <div>
                                    <span
                                      class='select_helper_popup_single_row_table_mainKeyWord select_tree_helper_popup_single_row_table_mainKeyWord'
                                      style={
                                        mappingProps.subsidiary
                                          ? ''
                                          : 'font-weight:400'
                                      }
                                    >
                                      {props.row[i]}
                                    </span>
                                  </div>
                                </div>
                                {/* 下一级 */}
                                {(() => {
                                  const leafValue =
                                    mappingProps.leafValue == '0'
                                      ? false
                                      : mappingProps.leafValue == '1'
                                        ? true
                                        : mappingProps.leafValue_custom;
                                  //e va l('console.log(leafValue,props.row,mappingProps.isLeaf)')
                                  if (!mappingProps.isLeaf) {
                                    mappingProps.isLeaf = null;
                                  }
                                  if (
                                    (props.row.children &&
                                      props.row.children.length) ||
                                    (props.row[mappingProps.isLeaf] !=
                                      leafValue &&
                                      mappingProps.isLazy)
                                  ) {
                                    return (
                                      <div
                                        class={'next_step'}
                                        style={'height:100%;width:20px'}
                                        onClick={async e => {
                                          if (
                                            props.row.children &&
                                            props.row.children.length
                                          ) {
                                            breadcrumbNavigation.value.push(
                                              props.row,
                                            );
                                            result_m.value = props.row.children;
                                          } else {
                                            if (!mappingProps.isLazy) {
                                              props.row[mappingProps.isLeaf] =
                                                leafValue;
                                              delete props.row.children;
                                            }
                                            props.row.children =
                                              await loadMobileData({
                                                pid:
                                                  mappingProps.type == 2
                                                    ? props.row[
                                                        mappingProps.lable_pid
                                                      ]
                                                    : props.row[
                                                        mappingProps
                                                          .classiFicationCode
                                                      ],
                                              });
                                            if (
                                              props.row.children &&
                                              props.row.children.length
                                            ) {
                                              result_m.value =
                                                props.row.children;
                                              breadcrumbNavigation.value.push(
                                                props.row,
                                              );
                                            } else {
                                              props.row[mappingProps.isLeaf] =
                                                leafValue;
                                              delete props.row.children;
                                            }
                                          }
                                          e.stopPropagation();
                                          e.preventDefault();
                                          return false;
                                        }}
                                      >
                                        {/* <svg style='pointer-events: none; overflow: visible;margin-right:8px; opacity: 1; transition: unset; transform: scale(1); transform-origin: left top; width: 14px; height: 14.3809px;'>
                                          <defs>
                                            <clipPath id='compoundPath-clip-path-7u8-lqbx6s0l-dt-m21-3'>
                                              <path
                                                d='M13.50004,1.00522h-7.4c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h7.4c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M9.64004,7.04522c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h3.5c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M13.02504,12.45022h-3.34c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h3.34c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M5.19503,8.03022c0.24352,0.68877 0.94783,1.10194 1.66787,0.9784c0.72003,-0.12354 1.24635,-0.74784 1.24635,-1.4784c0,-0.73055 -0.52631,-1.35486 -1.24635,-1.4784c-0.72003,-0.12354 -1.42435,0.28962 -1.66787,0.9784h-3.17v-4.125c0.7126,-0.26627 1.11304,-1.02381 0.93174,-1.7626c-0.1813,-0.7388 -0.88694,-1.2249 -1.64184,-1.13105c-0.75491,0.09386 -1.32003,0.73795 -1.3149,1.49865c0.00121,0.64436 0.4138,1.21595 1.025,1.42v9c0,0.82843 0.67157,1.5 1.5,1.5h2.69c0.26759,0.67972 0.98591,1.06784 1.70111,0.91912c0.7152,-0.14871 1.21926,-0.79101 1.19371,-1.52106c-0.02555,-0.73005 -0.57329,-1.33553 -1.29714,-1.43388c-0.72384,-0.09835 -1.41328,0.33904 -1.63269,1.03581h-2.655c-0.27614,0 -0.5,-0.22386 -0.5,-0.5v-3.9z '
                                                fill='rgba(0, 120, 212, 1)'
                                                stroke-width='0'
                                                style='transition: unset;'
                                              ></path>
                                            </clipPath>
                                          </defs>
                                          <g style='clip-path: url("#compoundPath-clip-path-7u8-lqbx6s0l-dt-m21-3");'>
                                            <rect
                                              x='0'
                                              y='0'
                                              width='14.000039269364864'
                                              height='14.380924526651803'
                                              fill='rgba(0, 120, 212, 1)'
                                              style='transition: unset;'
                                            ></rect>
                                          </g>
                                          <defs>
                                            <path
                                              id='stroke-path-7u8-lqbx6s0l-dq'
                                              fill-rule='evenodd'
                                              d='M13.50004,1.00522h-7.4c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h7.4c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M9.64004,7.04522c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h3.5c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M13.02504,12.45022h-3.34c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h3.34c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M5.19503,8.03022c0.24352,0.68877 0.94783,1.10194 1.66787,0.9784c0.72003,-0.12354 1.24635,-0.74784 1.24635,-1.4784c0,-0.73055 -0.52631,-1.35486 -1.24635,-1.4784c-0.72003,-0.12354 -1.42435,0.28962 -1.66787,0.9784h-3.17v-4.125c0.7126,-0.26627 1.11304,-1.02381 0.93174,-1.7626c-0.1813,-0.7388 -0.88694,-1.2249 -1.64184,-1.13105c-0.75491,0.09386 -1.32003,0.73795 -1.3149,1.49865c0.00121,0.64436 0.4138,1.21595 1.025,1.42v9c0,0.82843 0.67157,1.5 1.5,1.5h2.69c0.26759,0.67972 0.98591,1.06784 1.70111,0.91912c0.7152,-0.14871 1.21926,-0.79101 1.19371,-1.52106c-0.02555,-0.73005 -0.57329,-1.33553 -1.29714,-1.43388c-0.72384,-0.09835 -1.41328,0.33904 -1.63269,1.03581h-2.655c-0.27614,0 -0.5,-0.22386 -0.5,-0.5v-3.9z '
                                              style='transition: unset; transform-origin: left top;'
                                            ></path>
                                            <clipPath id='clip-path-7u8-lqbx6s0l-dq'>
                                              <use href='#stroke-path-7u8-lqbx6s0l-dq'></use>
                                            </clipPath>
                                          </defs>
                                          <use
                                            fill-opacity='0'
                                            fill='none'
                                            stroke='none'
                                            stroke-width='0'
                                            clip-path='url(#clip-path-7u8-lqbx6s0l-dq)'
                                            href='#stroke-path-7u8-lqbx6s0l-dq'
                                          ></use>
                                          <path
                                            d='M13.50004,1.00522h-7.4c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h7.4c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M9.64004,7.04522c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h3.5c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M13.02504,12.45022h-3.34c-0.27614,0 -0.5,0.22386 -0.5,0.5c0,0.27614 0.22386,0.5 0.5,0.5h3.34c0.27614,0 0.5,-0.22386 0.5,-0.5c0,-0.27614 -0.22386,-0.5 -0.5,-0.5z M5.19503,8.03022c0.24352,0.68877 0.94783,1.10194 1.66787,0.9784c0.72003,-0.12354 1.24635,-0.74784 1.24635,-1.4784c0,-0.73055 -0.52631,-1.35486 -1.24635,-1.4784c-0.72003,-0.12354 -1.42435,0.28962 -1.66787,0.9784h-3.17v-4.125c0.7126,-0.26627 1.11304,-1.02381 0.93174,-1.7626c-0.1813,-0.7388 -0.88694,-1.2249 -1.64184,-1.13105c-0.75491,0.09386 -1.32003,0.73795 -1.3149,1.49865c0.00121,0.64436 0.4138,1.21595 1.025,1.42v9c0,0.82843 0.67157,1.5 1.5,1.5h2.69c0.26759,0.67972 0.98591,1.06784 1.70111,0.91912c0.7152,-0.14871 1.21926,-0.79101 1.19371,-1.52106c-0.02555,-0.73005 -0.57329,-1.33553 -1.29714,-1.43388c-0.72384,-0.09835 -1.41328,0.33904 -1.63269,1.03581h-2.655c-0.27614,0 -0.5,-0.22386 -0.5,-0.5v-3.9z '
                                            fill='var(--t-color)'
                                            stroke-width='8'
                                            stroke='transparent'
                                          ></path>
                                        </svg> */}
                                        <svg
                                          width='17'
                                          height='16'
                                          viewBox='0 0 17 16'
                                          fill='none'
                                          xmlns='http://www.w3.org/2000/svg'
                                        >
                                          <rect
                                            opacity='0.01'
                                            x='0.5'
                                            y='16'
                                            width='16'
                                            height='16'
                                            transform='rotate(-90 0.5 16)'
                                            fill='#D8D8D8'
                                          />
                                          <mask
                                            id='mask0_1170_4370'
                                            style='mask-type:luminance'
                                            maskUnits='userSpaceOnUse'
                                            x='0'
                                            y='0'
                                            width='17'
                                            height='16'
                                          >
                                            <rect
                                              x='0.5'
                                              y='16'
                                              width='16'
                                              height='16'
                                              transform='rotate(-90 0.5 16)'
                                              fill='white'
                                            />
                                          </mask>
                                          <g mask='url(#mask0_1170_4370)'>
                                            <path
                                              d='M6.5 4L10.5 8L6.5 12'
                                              stroke='#A3A3A3'
                                              stroke-width='1.33333'
                                              stroke-linecap='round'
                                              stroke-linejoin='round'
                                            />
                                          </g>
                                        </svg>

                                        {/* <span
                                          style={
                                            'color:var(--t-color);font-size:12px'
                                          }
                                        >
                                          下级
                                        </span> */}
                                      </div>
                                    );
                                  }
                                })()}
                              </div>
                            </t-td>,
                          );
                        }
                        if (!result_m.value || result_m.value.length == 0) {
                          Template.push(<span>{$q.lang.comment.noData}</span>);
                        }
                        return Template;
                      })()}
                    </t-tr>
                  );
                },
              }}
            </t-table>
          </div>
        </t-card-section>
      </t-card>
    );
  };
  const computedSearchList = (data, dataList, pName, pNode) => {
    dataList.forEach(item => {
      if (
        item[mappingProps.labelField].indexOf(
          mappingProps.filter.value + ''.trim(),
        ) != -1
      ) {
        if (mappingProps.onlyCheckedNotLeaf) {
          if (!item.children || !item.children.length) {
            data.push(item);
          }
        } else {
          data.push(item);
        }
      }
      item.pName = pName ? pName : '';
      item.pNode = pNode ? pNode : '';
      if (item.children) {
        computedSearchList(
          data,
          item.children,
          `${item.pName ? item.pName + '/' : ''}${item[mappingProps.labelField]}`,
          item,
        );
      }
    });
  };
  const leafValue = computed(() => {
    let leafValue = mappingProps.leafValue;
    if (leafValue == 'true' || leafValue == 1) {
      return true;
    } else if (leafValue == 'false' || leafValue == '0') {
      return false;
    } else {
      return mappingProps.leafValue_custom;
    }
  });
  watch(
    () => mappingProps.filter.value,
    () => {
      if (!($q.screen.xs || $q.platform.is.mobile)) {
        return;
      }
      if (window.searchDelay) {
        window.clearTimeout(window.searchDelay);
        window.searchDelay = null;
      }
      let _mappingProps = mappingProps;
      window.searchDelay = window.setTimeout(async () => {
        if (_mappingProps.isLazy) {
          let fasDynamicFilter = {};
          fasDynamicFilter[_mappingProps.labelField] =
            _mappingProps.filter.value;
          let result = await _mappingProps.search(
            null,
            null,
            _mappingProps.filter.value,
            null,
            null,
          );
          result_m_search.value = result?.List;
          return;
        }

        const data = [];
        computedSearchList(data, dataBackUp.value);
        result_m_search.value = data;
      }, 400);
    },
  );
  const getRelationNode = (target_org, relationNode_org) => {
    let target = _.cloneDeep(target_org);
    let relationNode = relationNode_org ? _.cloneDeep(relationNode_org) : null;
    if (!relationNode) {
      relationNode = [target];
    }
    if (target.pNode) {
      getRelationNode(target.pNode, relationNode);
    }
    relationNode.forEach((item, index) => {
      item.level = index * 1 + 1;
      delete item.children;
      delete item.pNode;
    });
    return relationNode;
  };
  const hightLight = target => {
    if (!mappingProps.filter.value || !target) return target;
    // <span style="background-color:#FFAA00;">${filter.value}</span>
    const hightStr = `<span style="color:var(--t-color);display:inline !important">${mappingProps.filter.value}</span>`;

    const strReg = new RegExp(mappingProps.filter.value, 'gi');

    return target.replace(strReg, hightStr);
  };
  const generateSearchTable = () => {
    return (
      <t-card class='q_card_auto q_card'>
        <t-card-section
          class='row items-center t-pb-none tr-card-header'
          style='display:flex;padding:8px 0px; width: 100%;padding-top:0;justify-content: space-between;'
        >
          {/* v-model:modelValue={filter.value} */}
          <div class={'select_tree_m_content'}>
            {(() => {
              if (result_m_search.value.length == 0) {
                return (
                  <div
                    style={`
            display: flex
;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
        flex-wrap: wrap;

        `}
                  >
                    {/* <svg width="121" height="120" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_991_52044)">
                      <g filter="url(#filter0_f_991_52044)">
                        <path d="M125.355 127.356L35.0633 127.356L28.3926 121.563L90.2215 114.447L112.568 120.653L125.355 127.356Z" fill="#7591AD" />
                      </g>
                      <mask id="mask0_991_52044" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-39" y="99" width="228" height="114">
                        <ellipse cx="75.0001" cy="155.817" rx="113.525" ry="56.2901" fill="url(#paint0_linear_991_52044)" />
                      </mask>
                      <g mask="url(#mask0_991_52044)">
                        <ellipse cx="75.0001" cy="155.817" rx="113.525" ry="56.2901" fill="url(#paint1_linear_991_52044)" />
                      </g>
                      <mask id="mask1_991_52044" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="22" width="86" height="104">
                        <path d="M26.8125 31.9428C26.8125 26.9722 30.8419 22.9427 35.8125 22.9427H102.188C107.158 22.9427 111.188 26.9722 111.188 31.9427V96.061C111.188 97.8867 110.356 99.613 108.929 100.752L79.1729 124.487C78.1101 125.335 76.7909 125.797 75.4314 125.797H35.8125C30.8419 125.797 26.8125 121.767 26.8125 116.797V31.9428Z" fill="#D9D9D9" />
                      </mask>
                      <g mask="url(#mask1_991_52044)">
                        <path d="M26.8125 31.9428C26.8125 26.9722 30.8419 22.9427 35.8125 22.9427H102.187C107.158 22.9427 111.188 26.9722 111.188 31.9427V96.187C111.188 97.9405 110.42 99.6062 109.088 100.746L81.4925 124.356C80.4056 125.286 79.0223 125.797 77.5919 125.797H35.8125C30.8419 125.797 26.8125 121.767 26.8125 116.797V31.9428Z" fill="url(#paint2_linear_991_52044)" />
                        <g filter="url(#filter1_f_991_52044)">
                          <rect x="77.2944" y="98.1807" width="31.9501" height="37.2004" fill="#C3C9D6" />
                        </g>
                        <path d="M111 101.651V97.2446C111 97.2446 109.594 100.432 105.094 100.432H89.1946C84.1356 100.432 80.0769 104.601 80.0484 109.66C80.0126 116.027 79.7525 123.494 78.75 124.338C76.9688 125.838 71.5312 125.932 71.5312 125.932L85.7812 126.87L111 101.651Z" fill="url(#paint3_linear_991_52044)" />
                      </g>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M111.188 101.229C111.188 109.513 104.472 116.229 96.1875 116.229C87.9032 116.229 81.1875 109.513 81.1875 101.229C81.1875 92.9447 87.9032 86.229 96.1875 86.229C104.472 86.229 111.188 92.9447 111.188 101.229ZM109.289 119.523C105.599 122.17 101.075 123.729 96.1875 123.729C83.7611 123.729 73.6875 113.655 73.6875 101.229C73.6875 88.8026 83.7611 78.729 96.1875 78.729C108.614 78.729 118.688 88.8026 118.688 101.229C118.688 105.511 117.491 109.514 115.415 112.921L121.869 119.376C123.627 121.133 123.627 123.982 121.869 125.74C120.112 127.497 117.263 127.497 115.506 125.74L109.289 119.523Z" fill="url(#paint4_linear_991_52044)" />
                      <rect opacity="0.8" x="39" y="40.8339" width="60" height="12" rx="6" fill="#CFD5E1" />
                      <rect opacity="0.8" x="39" y="64.1805" width="60" height="12" rx="6" fill="#CFD5E1" />
                      <rect opacity="0.8" x="39" y="87.5272" width="30.0978" height="12" rx="6" fill="#CFD5E1" />
                    </g>
                    <defs>
                      <filter id="filter0_f_991_52044" x="22.3926" y="108.447" width="108.962" height="24.9092" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                        <feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_991_52044" />
                      </filter>
                      <filter id="filter1_f_991_52044" x="71.2944" y="92.1807" width="43.9502" height="49.2004" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                        <feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_991_52044" />
                      </filter>
                      <linearGradient id="paint0_linear_991_52044" x1="145.995" y1="125.641" x2="7.3483" y2="125.641" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#BDC5DE" stop-opacity="0" />
                        <stop offset="0.516703" stop-color="#BDC5DE" />
                        <stop offset="1" stop-color="#BDC5DE" stop-opacity="0" />
                      </linearGradient>
                      <linearGradient id="paint1_linear_991_52044" x1="75.0001" y1="99.5273" x2="75.0001" y2="151.755" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#BDC5DE" />
                        <stop offset="1" stop-color="#BDC5DE" stop-opacity="0" />
                      </linearGradient>
                      <linearGradient id="paint2_linear_991_52044" x1="69" y1="22.9427" x2="69" y2="125.797" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#EFF2F5" />
                        <stop offset="1" stop-color="#D6DBE5" />
                      </linearGradient>
                      <linearGradient id="paint3_linear_991_52044" x1="85.0798" y1="97.2446" x2="91.2656" y2="126.87" gradientUnits="userSpaceOnUse">
                        <stop stop-color="white" />
                        <stop offset="1" stop-color="#AFB7C5" />
                      </linearGradient>
                      <linearGradient id="paint4_linear_991_52044" x1="78.8303" y1="86.6802" x2="116.236" y2="133.17" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#8094FF" />
                        <stop offset="1" stop-color="#3656FF" />
                      </linearGradient>
                      <clipPath id="clip0_991_52044">
                        <rect width="150" height="150" fill="white" />
                      </clipPath>
                    </defs>
                  </svg> */}
                    <img
                      style='display:inline-block;width:120px;height:120px'
                      src={NoDataImage}
                    />

                    <p
                      style={
                        'width:100%;text-align:center;margin-top:16px;color:rgba(0,0,0,.32)'
                      }
                    >
                      无搜索结果
                    </p>
                  </div>
                );
              } else {
                return (
                  <t-table
                    rows={result_m_search.value}
                    columns={fieldMapping.value}
                    class='select_helper_popup_single_row_table select_helper_popup_single_row_table_m'
                    row-key='Name'
                    selection='single'
                    hide-header
                    hide-bottom
                    rows-per-page-options={[0]}
                  >
                    {{
                      body: props => {
                        // console.log(props)
                        return (
                          <t-tr
                            props={props}
                            onClick={() => {}}
                            style={
                              checkList.value.some(
                                el =>
                                  el[mappingProps.valueField] ==
                                  props.row[mappingProps.valueField],
                              )
                                ? 'background:#F0F2F5;color:var(--t-color);display: flex;align-items: center;'
                                : 'display: flex;align-items: center;'
                            }
                          >
                            {(() => {
                              let Template = [];
                              if (mappingProps.multiple) {
                                Template.push(
                                  <t-td
                                    style='padding-left:16px;display: flex;align-items: center;flex:none;width:40px'
                                    auto-width
                                  >
                                    <t-checkbox
                                      size='sm'
                                      onClick={() => {
                                        if (
                                          mappingProps.onlyCheckedNotLeaf &&
                                          (props.row.children ||
                                            props.row[mappingProps.isLeaf])
                                        )
                                          return;
                                        if (mappingProps.multiple) {
                                          if (
                                            checkList.value.some(
                                              el =>
                                                el[mappingProps.valueField] ==
                                                props.row[
                                                  mappingProps.valueField
                                                ],
                                            )
                                          ) {
                                            checkList.value =
                                              checkList.value.filter(
                                                el =>
                                                  el[mappingProps.valueField] !=
                                                  props.row[
                                                    mappingProps.valueField
                                                  ],
                                              );
                                          } else {
                                            checkList.value.push(props.row);
                                          }

                                          return;
                                        }
                                      }}
                                      {...(mappingProps.onlyCheckedNotLeaf &&
                                      (props.row.children ||
                                        props.row[mappingProps.isLeaf])
                                        ? { disable: true }
                                        : {})}
                                      v-model={selectList.value}
                                      val={props.row[mappingProps.valueField]}
                                    />
                                  </t-td>,
                                );
                              }
                              for (let i in props.row) {
                                Template.push(
                                  <t-td
                                    key={i}
                                    props={props}
                                    style={
                                      mappingProps.multiple
                                        ? 'padding:0 8px;padding-right:16px; width:calc(100% - 90px)display: flex;overflow:hidden;height:auto'
                                        : 'padding:0 8px;padding-left:16px;padding-right:16px;width:calc(100% - 90px); display: flex;overflow:hidden;height:auto'
                                    }
                                  >
                                    {/* 自定义内容区域 */}
                                    <div class={'table_content'}>
                                      <div
                                        class={'table_content_img'}
                                        onClick={() => {
                                          // if (
                                          //   mappingProps.onlyCheckedNotLeaf &&
                                          //   (props.row.children ||
                                          //     props.row[mappingProps.isLeaf])
                                          // )
                                          //   return;
                                          if (mappingProps.multiple) {
                                            if (
                                              checkList.value.some(
                                                el =>
                                                  el[mappingProps.valueField] ==
                                                  props.row[
                                                    mappingProps.valueField
                                                  ],
                                              )
                                            ) {
                                              checkList.value =
                                                checkList.value.filter(
                                                  el =>
                                                    el[
                                                      mappingProps.valueField
                                                    ] !=
                                                    props.row[
                                                      mappingProps.valueField
                                                    ],
                                                );
                                            } else {
                                              checkList.value.push(props.row);
                                            }
                                            return;
                                          }
                                          //级联
                                          if (
                                            mappingProps.responseRelationNode ==
                                            2
                                          ) {
                                            // let target =
                                            //   breadcrumbNavigation.value.slice(0);
                                            // target.push(props.row);
                                            // target.forEach((item, index) => {
                                            //   item.level = index + 1;
                                            //   delete item.children;
                                            // });
                                            let res = Object.assign(
                                              {},
                                              props.row,
                                            );
                                            res.relationNode = JSON.stringify(
                                              getRelationNode(res),
                                            );
                                            formatData(res);
                                            //数据处理
                                            mappingProps._confirm(res);
                                            return;
                                          }
                                          formatData(props.row);
                                          //数据处理
                                          mappingProps._confirm(props.row);
                                        }}
                                      >
                                        <span>
                                          {mappingProps.iconEnable
                                            ? (() => {
                                                return (
                                                  <img
                                                    src={
                                                      props.row[
                                                        mappingProps
                                                          .iconDataSource
                                                      ]
                                                    }
                                                  />
                                                );
                                              })()
                                            : ''}
                                        </span>
                                        <div>
                                          <span
                                            class='select_helper_popup_single_row_table_mainKeyWord select_tree_helper_popup_single_row_table_mainKeyWord'
                                            style={
                                              !props.row.pName
                                                ? ''
                                                : 'font-weight:400; display: flex;flex-wrap: wrap; gap: 6px;color:rgab(0,0,0,.8)'
                                            }
                                          >
                                            <span
                                              v-html={hightLight(props.row[i])}
                                            ></span>
                                            {(() => {
                                              if (props.row.pName) {
                                                return (
                                                  <i
                                                    style={
                                                      'color:rgba(0,0,0,.56);display: inline-block;width: 100%;text-align: left; font-size: 12px; font-style: normal;color:rgba(0,0,0,.32)}'
                                                    }
                                                    v-html={hightLight(
                                                      props.row.pName,
                                                    )}
                                                  ></i>
                                                );
                                              }
                                            })()}
                                          </span>
                                        </div>
                                      </div>
                                    </div>
                                  </t-td>,
                                );
                              }
                              if (
                                !result_m.value ||
                                result_m.value.length == 0
                              ) {
                                Template.push(
                                  <span>{$q.lang.comment.noData}</span>,
                                );
                              }
                              return Template;
                            })()}
                          </t-tr>
                        );
                      },
                    }}
                  </t-table>
                );
              }
            })()}
          </div>
        </t-card-section>
      </t-card>
    );
  };
  const generateBottom = () => {
    if (mappingProps.multiple) {
      return (
        <t-card
          style={
            'margin-top:0px;display:flex;justify-content: space-between;align-items:center;'
          }
        >
          <t-card-section
            class='row items-center t-pb-none tr-card-header'
            style='display:flex;padding-top:0;padding:12px 16px; width: 100%;justify-content: space-between;'
          >
            {(() => {
              if (mappingProps.maxCheckedLength != '') {
                return (
                  <div>
                    <div style={'color:var(--color);    line-height: 1;'}>
                      已选择{' '}
                      {checkList.value.length ? checkList.value.length : ''}
                    </div>
                    <div
                      style={
                        'font-size:12px;margin-top:6px;color:rgba(0,0,0,.56);    line-height: 1;'
                      }
                    >
                      最多选择{mappingProps.maxCheckedLength}
                    </div>
                  </div>
                );
              }
            })()}

            {/* <div>888888</div> */}
            {(() => {
              if (mappingProps.maxCheckedLength != '') {
                return (
                  <t-button
                    align='center'
                    class='btn-fixed-width '
                    color='primary'
                    style={'width:30%;height:40px'}
                    onClick={() => {
                      if (
                        checkList.value.length >
                          mappingProps.maxCheckedLength &&
                        mappingProps.maxCheckedLength != ''
                      ) {
                        return Funcs.Notify(
                          '提示',
                          '最多选择' + mappingProps.maxCheckedLength + '项',

                          'warning',
                        );
                      }
                      //数据处理
                      formatData(checkList.value);
                      mappingProps._confirm(checkList.value);
                    }}
                  >
                    {$q.lang.label.ok}{' '}
                    {checkList.value.length +
                      ' / ' +
                      mappingProps.maxCheckedLength}
                  </t-button>
                );
              } else {
                return (
                  <div style={'display:flex;gap:12px;width:100%'}>
                    <t-button
                      align='center'
                      class='btn-fixed-width tr-button-default-responsive'
                      style={'width:50%;height:40px'}
                      onClick={() => {
                        mappingProps.close();
                      }}
                    >
                      {$q.lang.label.cancel}
                    </t-button>
                    <t-button
                      align='center'
                      class='btn-fixed-width'
                      color='primary'
                      style={'width:50%;height:40px'}
                      onClick={() => {
                        //数据处理
                        formatData(checkList.value);
                        mappingProps._confirm(checkList.value);
                      }}
                    >
                      {$q.lang.label.ok}
                    </t-button>
                  </div>
                );
              }
            })()}
          </t-card-section>
        </t-card>
      );
    } else {
      return null;
    }
  };
  const breadcrumbsData = computed(() => {
    let formatArr = breadcrumbNavigation.value.map(item => {
      return {
        disabled: false,
        label: item[mappingProps.labelField],
        to: '',
        href: '',
        canClick: true,
        ...item,
        // icon: 'directions',
      };
    });
    formatArr.unshift({
      disabled: true,
      label: $q.lang.quickFilter.all,
      to: '',
      href: '',
    });
    return formatArr;
  });
  const genetateBreadcrumbs = () => {
    if (breadcrumbsData.value && breadcrumbsData.value.length) {
      return (
        <t-card class='q_card'>
          <t-card-section
            style='padding: 12px 16px; width: 100%;'
            class='row items-center t-pb-none tr-card-header'
          >
            <t-breadcrumbs
              autoWrap={false}
              gutter='sm'
              align='left'
              staticItems={breadcrumbsData.value}
              onClick={e => {
                let index = breadcrumbNavigation.value.findIndex(
                  item =>
                    item[mappingProps.valueField] == e[mappingProps.valueField],
                );
                if (
                  breadcrumbNavigation.value &&
                  breadcrumbNavigation.value.length &&
                  index > 0
                ) {
                  breadcrumbNavigation.value = breadcrumbNavigation.value.slice(
                    0,
                    index,
                  );
                  result_m.value =
                    breadcrumbNavigation.value[
                      breadcrumbNavigation.value.length - 1
                    ].children;
                } else {
                  breadcrumbNavigation.value = [];
                  result_m.value = dataBackUp.value;
                }
              }}
            ></t-breadcrumbs>
          </t-card-section>
        </t-card>
      );
    } else {
      return null;
    }
  };

  const renderMobileContent = () => {
    return (
      <t-dialog
        ref={mappingProps.refTPopupProxy}
        class='select_helper_tree_m_popup'
        position='right'
        // 如果设置为false 组件限制无法全屏
        maximized={true}
        onShow={async () => {
          isShow.value = true;
          if ($q.screen.xs || $q.platform.is.mobile) {
            if (mappingProps.isLazy) {
              result_m_search.value = [];
              dataBackUp.value = [];
              breadcrumbNavigation.value = [];
              result_m.value = await loadMobileData();
              dataBackUp.value = result_m.value;
            } else {
              loadMobileData();
            }
            // if (!(result_m.value && result_m.value.length)) {
            //   if (mappingProps.isLazy) {
            //     result_m.value = await loadMobileData();
            //     dataBackUp.value = result_m.value;

            //   } else {
            //     result_m_search.value=[]
            //     dataBackUp.value=[]
            //     loadMobileData();
            //   }
            // }
          }
        }}
        onHide={() => {
          isShow.value = false;
        }}
      >
        <div class={'select_helper_tree_m_popup_content'}>
          {generateToolbar()}
          {generateInput()}
          {genetateBreadcrumbs()}
          <p style='height: 0;padding: 6px 0; margin: 0;background: rgb(240, 242, 245);'></p>
          {(() => {
            if (mappingProps.filter.value) {
              return generateSearchTable();
            } else {
              return generateTable();
            }
          })()}
          {generateBottom()}
        </div>
      </t-dialog>
    );
  };
  const render = () => {
    return $q.screen.xs ? renderMobileContent() : renderPCContent();
  };
  return render();
};
